import React, { Component } from 'react'
import Dialog from './components/Dialog'

export default class App extends Component {
  constructor(){
    super()
    this.closeDialog=this.closeDialog.bind(this)
    this.state={
      showVisable1:false,
      showVisable2:true
    }
  }
  closeDialog(){
    this.setState({
      showVisable1:false
    })
  }
  render() {
    return (
      <div>
         <button onClick={()=>{
          this.setState({showVisable1:true})
         }}>显示</button>
         {this.state.showVisable1? <Dialog title={"管理员登录"} closeCallback={()=>{this.closeDialog()}}>
            <div>
               <div>
                  <label htmlFor="">用户名:</label>
                  <input type="text" />
               </div>
               <div>
                  <label htmlFor="">密码:</label>
                  <input type="password" />
               </div>
            </div>
         </Dialog>:<></>}
         <button>显示2</button>
         {this.state.showVisable2?<Dialog title={"用户列表"}>
            <div>
              <ul>
                <li>
                  <span>张三</span>
                  <button>删除</button>
                </li>
                <li>
                  <span>张三</span>
                  <button>删除</button>
                </li>
                <li>
                  <span>李四</span>
                  <button>删除</button>
                </li>
                <li>
                  <span>王五</span>
                  <button>删除</button>
                </li>
                <li>
                  <span>赵六</span>
                  <button>删除</button>
                </li>
              </ul>
            </div>
         </Dialog>:<></>}
      </div>
    )
  }
}
